<script>
/**
 * 盒子
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
} from 'vue';
import EchartContainer from '@/components/echartContainer.vue';
import * as echarts from 'echarts';

export default defineComponent({
    components: {
        EchartContainer,
    },
    props: {
        dataInfo: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    setup(props) {
        const EchartContainerRef = ref(); //组件实例
        const dataContainer = reactive({
            loading: false,
        });
        watch(
            [toRef(props, 'dataInfo')],
            () => {
                return;
                let dataInfo = props.dataInfo.data || [];
            },
            {
                immediate: true,
            },
        );
        onMounted(() => {
            if (!EchartContainerRef.value) return;
            let option = {
                tooltip: {},
                grid: {
                    top: '20%',
                    left: '2%',
                    right: '2%',
                    bottom: '20%',
                    containLabel: true,
                },
                legend: {
                    itemGap: 50,
                    data: ['光热发电站(MW)', '光伏发电站(MW)','风发电站(MW)','电化学储能电站(MW)','发电计划(MW)'],
                    textStyle: {
                        color: '#f9f9f9',
                        borderColor: '#fff',
                    },
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#f9f9f9',
                            },
                        },
                        axisLabel: {
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#d1e6eb',
                                margin: 15,
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: ['15min', '30min', '45min','60min' ],
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        // max: 140,
                        splitNumber: 7,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#0a3256',
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            margin: 20,
                            textStyle: {
                                color: '#d1e6eb',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    {
                        type: 'value',
                        
                    },
                ],
                series: [
                {
                        name: '发电计划(MW)',
                        type: 'line',
                        yAxisIndex: 1,
                        barWidth: 20,
                        tooltip: {
                            show: false,
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        itemStyle: {
                            normal: {

                                color: '#4cdbfe'
                            },
                        },
                        data: [200, 382, 102, 267],
                    },
                    {
                        name: '光热发电站(MW)',
                        type: 'bar',
                        barWidth: 20,
                        tooltip: {
                            show: false,
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#114382'
                            },
                        },
                        data: [200, 382, 102, 267],
                    },
                    {
                        name: '光伏发电站(MW)',
                        type: 'bar',
                        barWidth: 20,
                        tooltip: {
                            show: false,
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                        '#43eec6',
                                        '#43eec6',
                                        '#43eec6',
                                        '#43eec6',
                                        '#43eec6',
                                        '#43eec6',
                                        '#43eec6',
                                    ];
                                    return colorList[params.dataIndex];
                                },
                            },
                        },
                        data: [10, 200, 102, 300],
                    },
                    {
                        name: '风发电站(MW)',
                        type: 'bar',
                        barWidth: 20,
                        tooltip: {
                            show: false,
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        itemStyle: {
                            normal: {

                                color: function (params) {
                                    var colorList = [
                                        '#14c8d4',
                                        '#14c8d4',
                                        '#14c8d4',
                                        '#14c8d4',
                                        '#14c8d4',
                                        '#14c8d4',
                                        '#14c8d4',
                                    ];
                                    return colorList[params.dataIndex];
                                },
                            },
                        },
                        data: [200, 382, 102, 267],
                    },
                    {
                        name: '电化学储能电站(MW)',
                        type: 'bar',
                        barWidth: 20,
                        tooltip: {
                            show: false,
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#e90'
                            },
                        },
                        data: [200, 382, 102, 267],
                    },
                ],
            };
            /** 初始化图表 */
            EchartContainerRef.value.initData(option);
        });
        return {
            dataContainer,
            EchartContainerRef,
        };
    },
});
</script>

<template>
    <div class="box-cp-container">
        <EchartContainer ref="EchartContainerRef"></EchartContainer>
    </div>
</template>

<style lang="scss" scoped>
.box-cp-container {
    width: 100%;
    height: 100%;
}
</style>
